<!--柱状图-->
<template>
  <div id="ycbar" :class="className" :style="{height:height,width:width}">{{ycBarQueryResult}}</div>
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons')   // echarts theme
  import resize from './../mixins/resize'
  import { listYcBar } from "@/api/dashboard/ycbar";
  import {listYcBarByYear} from "@/api/dashboard/ycbar";


  const animationDuration = 3000
  var seriesArr = [];
  var datalegend = [];
  var ycbarOption= {};


  export default {
    name: 'ycbar',
    mixins: [resize],
    props: {
      ycBarQueryResult: {
        type: Object,
      },
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '450px'
      }
    },
    data() {
      return {
        dataResult:{
          indeId:null,
          orgId: null,
          dataYear:null,
          // dataDimension:null,
        },
        data: {},
        MapList:[],
        rows:[],

        orgId:[],
        // dataDimension:[],
        dataValue:[],
        dataYear:[],
        orgName: [],
        chart: null,

      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    created() {

    },
    watch: {
      ycBarQueryResult: {
        handler(newValue) {
          // console.log("watch: 监听到的newValue数据如下"+newValue)
          // console.log(newValue)
          this.emptyChart();
          this.getBarList(newValue);
          // listYcBar(newValue);
        },
        deep: true
      }
    },
    methods: {
      async getBarList(newValue) {
        this.loading = true;
        // console.log("ycbar中ycBarQueryResult的数据:" );
        // console.log(this.ycBarQueryResult)

        this.dataResult.indeId = newValue.indeId;
        // this.dataResult.dataYear = newValue.dataYear;

        for(let i = 0; i < newValue.dataYear.length; i++)
        {
          this.orgId=[];
          this.orgName=[];
          this.dataYear=[];
          this.dataValue=[];
          this.dataResult.dataYear = newValue.dataYear[i];

          // console.log(this.dataResult.dataYear);

          for(let j = 0; j < newValue.orgId.length; j++)
          {
            this.dataResult.orgId = newValue.orgId[j];
            // console.log(this.dataResult.orgId);
            // console.log(this.dataResult)
            await listYcBarByYear(this.dataResult).then(response => {
              this.MapList = response.rows;
              // console.log("油厂柱状图数据：" + this.MapList);// 确认数据有获取到
              // console.log(this.MapList)
              let MapList = this.MapList;
              if (MapList) {
                let obj = eval(MapList);
                for (let k = 0; k < obj.length; k++) {
                  this.orgId.push(MapList[k].orgId);
                  this.dataYear.push(MapList[k].dataYear);
                  this.dataValue.push(MapList[k].dataValue);
                  if(i == 0 || obj.length > 0) {
                    this.orgName.push(MapList[k]['ycOrg'].orgName);
                  }
                  else continue;
                }
              }
            });
          }
          // console.log("--------------------this.orgName")
          // console.log(this.orgName)
          // console.log("--------------------this.dataYear")
          // console.log(this.dataYear)
          // console.log("--------------------this.dataValue")
          // console.log(this.dataValue)


          seriesArr.push({
            name: this.dataYear[0] + "年",  //dataDimension[1, 1, 1]
            data: this.dataValue,
            type: 'bar',
            label:{
              show: true,
              position:'inside',
            },
            // markPoint:{
            //   data:[
            //     {type:'max',name:'最大值'},
            //   ]
            // },
            markLine:{
              data:[
                {type:'average',name:'平均值'}
              ]
            }
          })
          datalegend.push(this.dataYear[0] +"年")
        }

        // console.log(seriesArr)

         ycbarOption = {
          legend: {
            data: datalegend,
            orient: 'horizontal',
          },
          xAxis: {
            type: 'category',
            data: this.orgName
          },
          series: seriesArr,

        }
        //动态插入数据时，数据在这里设置更新
        this.chart.setOption(ycbarOption);

      },

      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.chart.setOption(
          {
            tooltip: {
              trigger: 'axis',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              },
            },
            toolbox: {
              feature: {
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            grid: {
              top: 80,
              left: '2%',
              right: '7%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [{
              type: 'category',
              data: this.orgName,
              axisTick: {
                alignWithLabel: true
              }
            }],
            yAxis: [{
              type: 'value',
              axisTick: {
                show: true
              }
            }],
            label:{
              show: true,
              position:'inside',
            },

          }
        )

      },
      emptyChart(){
        datalegend = [];
        seriesArr = [];
        this.orgId=[];
        this.orgName=[];
        // this.dataDimension=[];
        this.dataValue=[];
        this.dataYear=[];
        // this.chart = echarts.init(this.$el, 'macarons')
        this.chart.clear();
        this.chart.setOption(
          {
            legend: {
              data: datalegend,
              orient: 'horizontal',
            },
            toolbox: {
              feature: {
                // dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            xAxis: {
              type: 'category',
              data: this.orgName
            },
            series: seriesArr,
            tooltip: {
              trigger: 'axis',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              },
            },
            grid: {
              top: 80,
              left: '2%',
              right: '7%',
              bottom: '3%',
              containLabel: true
            },
            yAxis: [{
              type: 'value',
              axisTick: {
                show: true
              }
            }],
            label:{
              show: true,
              position:'inside',
            },
          },true)
      }


      },
  }
</script>
